<template>
  <d2-container>
    <div class="row-ac pb-2">
      <div><el-button type="warning" @click="addPanicbuy" size="small" icon="el-icon-plus">添加产品</el-button></div>
      <div class="ml-2"><el-button type="danger" size="small" icon="el-icon-delete">批量删除</el-button></div>
    </div>
    <div class="d-f">
      <div class="flex-1 ml-2">
        <el-table :data="panicbuyList" border stripe>
          <el-table-column align="center" label="序号" type="index" width="45" />
          <el-table-column align="center" label="图片" prop="image" width="75">
            <template slot-scope="scope">
              <el-popover placement="right" trigger="hover" v-if="scope.row.main_image">
                <el-image slot="reference" style="width: 40px; height: 40px" :src="scope.row.main_image" fit="cover" />
                <el-image style="width: 220px; height: 220px" :src="scope.row.main_image" fit="cover" />
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column align="center" label="商品名称" prop="title" width="160" />
          <el-table-column align="center" label="抢购钻石" prop="points_required" width="60" />
          <el-table-column align="center" label="所需金币" prop="gold_required" width="60" />
          <el-table-column align="center" label="市场价" prop="mar_price" width="60" />
          <el-table-column align="center" label="参与人数" prop="used_quantity" width="60" />
          <el-table-column align="center" label="机器人数量" prop="robots_num" width="60" />
          <el-table-column align="center" label="可抢到数量" prop="win_number" width="60" />
          <el-table-column align="center" label="份数" prop="commodity" width="60" />
          <el-table-column align="center" label="抢购状态" prop="application" width="60">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.panic_state == 1" type="warning" effect="dark">进行中</el-tag>
              <el-tag v-if="scope.row.panic_state == 2" type="success" effect="dark">已开奖</el-tag>
              <el-tag v-if="scope.row.panic_state == 0" type="danger" effect="dark">未开始</el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="230">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" v-if="scope.row.panic_state == 0"
                @click="openPatch(scope.row.id, 1)">开始</el-button>
              <el-button size="mini" type="warning" v-if="scope.row.panic_state == 1"
                @click="openPatch(scope.row.id, 2)">开奖</el-button>
              <el-button size="mini" type="danger" v-if="scope.row.panic_state == 2"
                @click="openPatch(scope.row.id, 0)">重置抢购</el-button>
              <el-button size="mini" type="primary" v-if="scope.row.panic_state != 2"
                @click="openAddRobot(scope.row.id)">添加机器人</el-button>
              <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
              <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="flex-1 ml-2 mt-2">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page.sync="queryInfo.page" layout="total, prev, pager, next" :total="panicbuyTotal">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" width="40%" title="添加/编辑分类">
      <el-form :model="formRobot" ref="form" label-width="120px">
        <el-form-item label="机器人数量" prop="num_records">
          <div style="width: 50%;">
            <el-input v-model="formRobot.num_records"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
  import {
    panicbuyListUrl,
    panicbuyPatchUrl,
    panicbuyDeleteUrl,
    openlotteryUrl,
    generateRobotUrl
  } from '@/utils/takemoney'
  import {
    patch
  } from '@/utils/request'
  export default {
    name: 'takemoney',
    data() {
      return {
        dialogVisible: false,
        panicbuyList: [],
        panicbuyTotal: 0,
        queryInfo: {
          page: 1,
          page_size: 10
        },
        form: {
          product_name: '',
          sub_name: '',
          category: '',
          brand: '',
          image_list: [],
          price: 0,
          mar_price: 0,
          win_number: 0,
          inventory: 0,
          sales_volume: 0,
          follow: 0,
          is_recommend: false,
          is_hot: false,
          is_new: false,
          sort: 1,
          details: '',
          product_state: 2
        },
        formRobot:{
          num_records:0,
          panicbuy_id:''
        }
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.getPanicbuyList()
      },
      getPanicbuyList() {
        this.$get(panicbuyListUrl, this.queryInfo).then(res => {
          this.panicbuyList = res.data.data.list
          this.panicbuyTotal = res.data.data.total
        })
      },
      // 分页页码显示条数
      handleSizeChange(newSize) {
        // 把每页显示多少数据重新赋值
        this.queryInfo.page_size = newSize
        this.getPanicbuyList()
      },
      // 翻页事件
      handleCurrentChange(newPage) {
        this.queryInfo.page = newPage
        this.getPanicbuyList()
      },
      openPatch(panicId, num) {
        console.log(num);
        if (num == 0) {
          this.panicTitle = '此操作将重置抢购, 是否继续?'
        } else if (num == 2) {
          this.panicTitle = '此操作将进行开奖, 是否继续?'
        }else if (num == 1) {
          this.panicTitle = '此操作将开启抢购, 是否继续?'
        }
        this.$confirm(this.panicTitle, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          patch(panicbuyPatchUrl + panicId + '/', {
            panic_state: num
          }).then(res => {
            console.log(res);
            this.getPanicbuyList();
            if (num == 2) {
              this.$post(openlotteryUrl + panicId + '/').then(res1 => {
                console.log(res1);
                this.$message({
                  type: 'warning',
                  message: '开奖成功'
                });
              })
            }
          }).catch(error => {
            console.log('请求被取消');
          });
        }).catch(error => {
          console.log('确认对话框被取消');
        });
      },
      openDelete(panicId) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$del(panicbuyDeleteUrl + panicId + '/').then(res => {
            if (res.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getPanicbuyList()
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      openAddRobot(panicId){
        this.dialogVisible = true
        this.formRobot.panicbuy_id = panicId
      },
      submitForm(){
        this.$get(generateRobotUrl, this.formRobot).then(res=>{
          console.log(res.data);
          if(res.data.code == 400){
            this.$message({
              type: 'info',
              message: res.data.msg
            });
          }
          if(res.data.code == 200){
            this.$message({
              type: 'info',
              message: res.data.msg
            });
            this.getPanicbuyList()
            this.dialogVisible = false
            this.formRobot = {}
          }
        })
      },
      addPanicbuy() {
        this.$router.push('/takemoney/addpanicbuy');
      },
      handleEdit(panicId) {
        this.$router.push({
          path: '/takemoney/addpanicbuy/',
          query: {
            panicId: panicId // 添加第二个参数
          }
        });
      }
    }
  }
</script>
<style lang="scss">
  .el-tree-node__content {
    height: 46px;
  }
</style>
